import React from 'react'
import { Menu, Icon } from 'antd'
import { Link } from 'react-router-dom'
const renderMenuItem =
    ({ key, title, icon, link, ...props }) =>
        <Menu.Item
            key={key || link}
            {...props}
        >
            <Link to={link || key}>
                {icon && <Icon type={icon} />}
                <span className="nav-text">{title}</span>
            </Link>
        </Menu.Item>

const renderSubMenu =
    ({ key, title, icon, link, sub, ...props }) =>
        <Menu.SubMenu
            key={key || link}
            title={
                <span>
                    {icon && <Icon type={icon} />}
                    <span className="nav-text">{title}</span>
                </span>
            }
            {...props}
        >
            {sub && sub.map(item => renderMenuItem(item))}
        </Menu.SubMenu>

export default ({ menus, ...props }) => {
    // console.log("props", props)
    let defaultItem = props.defaultitem ? [props.defaultitem] : [menus[0].key]
    return (
        <Menu {...props} defaultSelectedKeys={defaultItem}>
            {menus && menus.map(
                item => item.sub && item.sub.length ? renderSubMenu(item) : renderMenuItem(item)
            )}
        </Menu>
    )
}